<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :before-open="beforeOpen"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <!-- <template #objType="scope">
        <div>{{ scope.row.objCreateCode?scope.row.objCreateCode:'/' }}</div>
      </template> -->
      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          type="text"
          size="small"
          @click="look(scope.row, scope.index)"
        >
          查看
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="lookContent(scope.row)"
        >
          被举报内容
        </el-button>
        <el-button
          v-if="scope.row.status === REPORT_STATUS.PENDING_AUDIT"
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="audit(scope.row, scope.index)"
        >
          审核
        </el-button>
      </template>
      <template #auditForm="{ type }">
        <div v-if="type == 'view' && isAudit">
          <div>
            <span>举报处理：</span>
            <el-radio
              v-model="radioValue"
              :label="REPORT_STATUS.REJECTED"
            >
              驳回
            </el-radio>
            <el-radio
              v-model="radioValue"
              :label="REPORT_STATUS.SHIELD"
            >
              审核通过，屏蔽举报内容
            </el-radio>
          </div>
          <div
            class="flex-end"
            style="margin-top: 15px"
          >
            <el-button @click="$refs.crud.closeDialog()">取消</el-button>
            <el-button
              class="btn"
              :loading="loading"
              type="primary"
              @click="confirm"
            >
              确定
            </el-button>
          </div>
        </div>
      </template>
    </avue-crud>
    <reportRecordPopup
      :id="id"
      v-model="reportRecordVisible"
      :is-comment="isComment"
    ></reportRecordPopup>
    <reportDiaryPopup
      :id="id"
      v-model="reportDiaryVisible"
      :action="action"
      :is-comment="isComment"
    ></reportDiaryPopup>
    <reportArticlePopup
      :id="id"
      v-model="reportArticleVisible"
      :is-comment="isComment"
    ></reportArticlePopup>
  </basic-container>
</template>

<script>
import { fetchList, getObj, auditReportContent } from '@/api/core/reportManage';
import { tableOption } from '@/const/crud/content/report-manage';
import { mapGetters } from 'vuex';
import crudMixins from '@/mixins/crud';
import {
  REPORT_STATUS,
  REPORTING_TYPE,
  REPORTING_CONTENT_TYPE,
} from '@/const/type';
import reportRecordPopup from './components/reportRecordPopup.vue';
import reportDiaryPopup from './components/reportDiaryPopup.vue';
import reportArticlePopup from './components/reportArticlePopup.vue';

export default {
  name: 'reportManage',
  components: { reportRecordPopup, reportDiaryPopup, reportArticlePopup },
  mixins: [crudMixins],
  data() {
    return {
      form: {},
      action: '',
      isAudit: false,
      REPORT_STATUS,
      radioValue: REPORT_STATUS.REJECTED,
      loading: false,
      reportRecordVisible: false,
      reportDiaryVisible: false,
      reportArticleVisible: false,
      isComment: false,
      id: null,
    };
  },
  computed: {
    ...mapGetters(['permissions']),
    viewTitle() {
      return this.isAudit ? '审核举报内容' : '查看举报详情';
    },
    tableOption() {
      return tableOption(this.viewTitle);
    },
  },
  watch: {},
  methods: {
    look(row, index) {
      this.isAudit = false;
      this.$refs.crud.rowView(row, index);
    },
    lookContent(row) {
      this.id = row.id;
      this.isComment = row.objContentType === REPORTING_TYPE.COMMENT;
      if (row.objType === REPORTING_CONTENT_TYPE.PET_RECORD) {
        this.reportRecordVisible = true;
      }
      if (row.objType === REPORTING_CONTENT_TYPE.DYNAMIC) {
        this.action = row.objType;
        this.reportDiaryVisible = true;
      }
      if (row.objType === REPORTING_CONTENT_TYPE.PET_DIARY) {
        this.action = row.objType;
        this.reportDiaryVisible = true;
      }
      if (row.objType === REPORTING_CONTENT_TYPE.ARTICLE_MNG) {
        this.reportArticleVisible = true;
      }
    },
    audit(row, index) {
      this.isAudit = true;
      this.$refs.crud.rowView(row, index);
      this.radioValue = REPORT_STATUS.REJECTED;
    },
    async confirm() {
      // console.log(123, this.$refs.crud);
      this.loading = true;
      try {
        await auditReportContent(this.radioValue, this.form.id);
        this.$message.success('操作成功');
        this.loading = false;
        this.$refs.crud.closeDialog();
        this.getList(this.page, true);
      } catch (error) {
        this.loading = false;
        throw new Error(error);
      }
    },
    // 列表查询
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      const timeObj = {};
      if (
        this.searchForm.searchCreateTime &&
        this.searchForm.searchCreateTime.length
      ) {
        timeObj.createStartTime =
          this.searchForm.searchCreateTime[0] + ' 00:00:00';
        timeObj.createEndTime =
          this.searchForm.searchCreateTime[1] + ' 23:59:59';
        // delete this.searchForm.searchCreateTime;
      }
      fetchList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
          },
          this.searchForm,
          timeObj
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
          this.tableData.map((item) => {
            if (item.objType === '1') {
              item.objCreateCode = '/';
              item.objCreateBy = '/';
            }
          });
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 打开窗口前的拦截，调用详情接口回显数据
    async beforeOpen(done, type) {
      // 如果不是新增
      if (type !== 'add') {
        const { data } = await getObj(this.form.id);
        this.form = data.data;
        if (Array.isArray(JSON.parse(data.data.picUrl))) {
          const picture = JSON.parse(data.data.picUrl);
          this.form.picUrl = picture.map((item) => {
            let type = 'mov';
            if (item.type === 'image') {
              type = 'jpg';
            }
            return `${item.url}?.${type}`;
          });
          console.log('picUrl', this.form.picUrl);
        }
      }
      done();
    },
    //  导出excel
    exportExcel() {
      this.downBlobFile('/app/appuser/export', this.searchForm, 'appuser.xlsx');
    },
  },
};
</script>
